<template>
    <div>
        <van-image width="10rem" height="5rem" fit="cover"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    </div>
    <van-grid direction="horizontal" :column-num="3" :border="false">
        <van-grid-item icon="play-circle-o" text="播放全部" />
        <van-grid-item icon="share-o" text="分享" @click="showPopup1" />
        <van-grid-item icon="delete-o" text="删除" @click="fn1" />
    </van-grid>
    <!-- <van-row justify="space-around">
        <van-col span="8"></van-col>
        <van-col span="8" @click="showPopup1">登录遇到问题 |</van-col>
        <van-col span="8">111</van-col>
    </van-row> -->
    <van-popup v-model:show="show1" position="bottom" :style="{ height: '30%' }" round>
        <van-cell title="QQ" icon="smile-comment-o" />
        <van-cell title="微信" icon="comment-circle-o" />
        <van-cell title="微博" icon="browsing-history-o" />
        <van-cell title="其他" icon="link-o" />
    </van-popup>
    <hr />
    <div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item, index in list" :key="index" icon="play-circle-o">
                <van-image width="30" height="30" :src="item.url" />
                {{ item.name }} - {{ item.user }}
            </van-cell>
        </van-list>
    </div>
</template>

<script setup lang="ts">
import { Dialog } from 'vant';
import { ref } from 'vue';
const loading = ref(false)
const finished = ref(false)
const list = ref([
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        name: '情人',
        user: '蔡徐坤'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        name: '外婆家',
        user: '苏醒'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        name: '青城山下',
        user: 'KKECHO/REDBOI'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        name: '情人',
        user: '蔡徐坤'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        name: '外婆家',
        user: '苏醒'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        name: '青城山下',
        user: 'KKECHO/REDBOI'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        name: '情人',
        user: '蔡徐坤'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        name: '外婆家',
        user: '苏醒'
    },
    {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        name: '青城山下',
        user: 'KKECHO/REDBOI'
    }

])
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
    { name: '二维码', icon: 'qrcode' },
]
const show = ref(false);
let fn1 = ()=>{
    Dialog.confirm({
        title: '警告',
        message:
            '是否删除',
    })
        .then(() => {
            console.log('1')
        })
        .catch(() => {
            console.log('-1')
        });
    
} 

const show1 = ref(false);
const showPopup1 = () => {
    show1.value = true;
}
const onLoad = () => {
    console.log('onload')
    setTimeout(() => {
        for (let i = 0; i < 9; i++) {
            list.value.push(list.value.length + 1);
        }

        loading.value = false
        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 1000)
}
</script>

<style scoped>

</style>